<template>

    <div class="login-container">
      <div class="login-box">
        <!-- <div class="welcome">
          <h2>welcome-back</h2>
    
        </div> -->
        <div class="login-form">
          <h3>用户登录</h3>
          <el-form ref="form" :model="loginForm" :rules="rules" label-position="left" label-width="0">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="do_login" :loading="loading">登录</el-button>
              <!-- <el-button  @click="$router.push('/changePassword')" :loading="loading">找回密码</el-button> -->

            </el-form-item>
          </el-form>
        </div>
        <div class="pic">
          <img src="/assets/bg.jpg" alt="">
    
        </div>
      </div>


    </div>
  </template>
  
  <script>
  import{getUserInfo, login} from"@/api/login.js"
  import {setCurrentUser, setToken} from '@/utils/auth'
  
// import vueConfig from "vue.config"
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        },
        loading: false
      }
    },
    methods: {
      do_login() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // this.loading = true
            
          login(this.loginForm).then(res=>{
            
        
            if(res.code==200){
            
          setToken(res.data.accessToken)
          getUserInfo().then(resp=>{
            if(resp.code==200)
            setCurrentUser(resp.data)
            this.$router.push(`/home`)
          })
          
         
        
        }
          else  this.$message.error(res.msg)
            
          }
        )
      }
    })
  }}}
  </script>
  
  <style lang="scss">

   
   
  
  .login-container {
    // background-image: url('../assets/bg.jpg');
    // background: rgb(138,0, 18);
    background-size: 100%;
    // margin-top: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  
    .login-box {
      background: white;
 
      width: 400px;
      height: 100%;
      // display: flex;
      // margin: 100px auto;
      // justify-content: center;
      // align-items: center;
      // height: 400px;
      border-radius: 5px;
      box-shadow: 0px 0px 10px #ccc;
    }
    .pic{
  
      // width: 40%;
      // height: 100px;
      // background-color: red;
    }
  //     .login-logo {
  //       height: 40px;
  //       // position: absolute;
  //       // margin-top: 30px;
  //       // // position: absolute;
  //       // margin: auto;
  //       transform:scale(0.3);
  //       // width: 5px;
  //       display: flex;
  //       justify-content: center;
  //       align-items: center;
  
  //       img {
  //         height: 80%;
  //       }
  //     }
  
      .login-form {
        // width: 50%;
        padding: 20px;
      }
  
  //       h3 {
  //         font-size: 24px;
  //         margin-bottom: 20px;
  //         text-align: center;
  //       }
  //     }
  //   }
   
  // }
  </style>